<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .aspect-radio {
      width: 200px;
      aspect-ratio: 16 / 9; /* 宽高比为16/9 */
      background-color: saddlebrown;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .progress {
      width: 202px;
      margin-top: 12px;
      background-color: #fff;
      border: 1px solid #ccc;
      height: 5px;
      position: relative;
    }
    .progress-slider {
      cursor: pointer;
      height: 10px;
      width: 6px;
      background-color: #888;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%) translateX(-3px);
    }
    .progressBar {
      position: absolute;
      top: 50%;
      left: 0;
      height: 10px;
      transform: translateY(-50%) translateX(-3px);
      background-color: yellowgreen;
    }
  </style>
  <body>
    <div class="aspect-radio">这是一个盒子</div>
    <div>
      <label for="percent">拖动以修改盒子宽度</label>
      <input type="text" name="percent" value="200" alt="" />px 高度会等比变化
      <div id="aspect-radio" class="progress">
        <div id="progressBar" class="progressBar"></div>
        <div id="thumb" class="progress-slider"></div>
      </div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const progressBar = document.getElementById('progressBar');
        const thumb = document.getElementById('thumb');
        const percentInput = document.querySelector("input[name='percent']");
        const boxEl = document.querySelector('.aspect-radio');
        let isDragging = false;
        let startX;

        let currentX;
        let progressWidth;

        thumb.addEventListener('mousedown', (e) => {
          isDragging = true;
          startX = e.clientX - thumb.offsetLeft;
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', onMouseUp);
        });
        function onMouseMove(e) {
          if (!isDragging) return;

          currentX = e.clientX - startX;

          // 防止拖动条超出进度条容器的范围
          const maxLeft = thumb.parentNode.offsetWidth - thumb.offsetWidth + 3;
          const minLeft = 0;
          if (currentX > maxLeft) {
            currentX = maxLeft;
          } else if (currentX < minLeft) {
            currentX = minLeft;
          }
          console.log([minLeft, currentX, maxLeft]);
          // 更新拖动条的位置
          thumb.style.left = `${currentX}px`;

          // 更新进度条的进度
          const progressPercent = (currentX / maxLeft) * 100;
          progressBar.style.width = `${progressPercent}%`;
          const ww = 200 + 800 * (progressPercent / 100);
          percentInput.value = ww;
          boxEl.style.width = `${ww}px`;
        }

        function onMouseUp() {
          isDragging = false;
          document.removeEventListener('mousemove', onMouseMove);
          document.removeEventListener('mouseup', onMouseUp);
        }
      });
    </script>
  </body>
</html>
